<%--
  Created by IntelliJ IDEA.
  User: zl
  Date: 2021/11/29
  Time: 10:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
<%--    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/layui/css/layui.css"/>--%>
<%--    <script src="${pageContext.request.contextPath}/component/layui/layui.js"></script>--%>
<%--    <script src="/layui/layui/layui.js"></script>--%>
<%--    <link rel="stylesheet" type="text/css" href="/layui/layui/css/layui.css"/>--%>
    <script src="${pageContext.request.contextPath}/layui/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/layui/css/layui.css"/>
</head>
<body>
<script type="text/html" id="aad">
   {{# if(d.url!=null){ }}
   <img src="{{d.url}}" alt="">
   {{# }else{ }}
   照片
   {{# }  }}
</script>
<div class=" ">
    <div class=" ">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">全局查询</label>
                            <div class="layui-input-inline">
                                <input type="text" name="bookid" autocomplete="off" name="all" id="all" class="layui-input" placeholder="全局查询">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="searchBtn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">新增</button>
            </div>
        </script>

         <table class="layui-hide" id="teaTable" lay-filter="teaTable"></table>
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-warm layui-btn-xs data-count-edit" lay-event="edit">修改</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
    </div>
</div>
<%-- 新增表单--%>
<form class="layui-form" action="" lay-filter="biaodan"  style="display: none" id="addform">
    <input id="bookid" name="bookid" hidden>
    <div class="layui-form-item">
        <label class="layui-form-label">主图</label>
        <div class="layui-input-inline">
            <input type="file" name="url" id="fileName" lay-verify="headImg" class="layui-input">
<%--            <input type="text" name="url1" id="fileName1" class="layui-input">--%>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">书籍名称</label>
        <div class="layui-input-inline">
            <input type="text" name="bookname" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">作者</label>
        <div class="layui-input-inline">
            <input type="text" name="bookauthor"   placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
<%--    <div class="layui-form-item">--%>
<%--        <label class="layui-form-label">数量</label>--%>
<%--        <div class="layui-input-inline">--%>
<%--            <input type="text" name="bookcount"   placeholder="" autocomplete="off" class="layui-input">--%>
<%--        </div>--%>
<%--    </div>--%>
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input type="text" name="bookmoney"   placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-inline">
<%--            <input type="text" name="typeid"   placeholder="" autocomplete="off" class="layui-input">--%>
            <select name="typeid" lay-filter="typeid" id="typeid">

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">出版社</label>
        <div class="layui-input-inline">
            <input type="text" name="bookpublisher"   placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单价</label>
        <div class="layui-input-inline">
            <input type="text" name="bookprice"   placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div><div class="layui-form-item">
    <label class="layui-form-label">数量</label>
    <div class="layui-input-inline">
        <input type="text" name="bookcount"   placeholder="" autocomplete="off" class="layui-input">
    </div>
</div><div class="layui-form-item">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-inline">
<%--        <input type="text" name="bookstate"   placeholder="" autocomplete="off" class="layui-input">--%>
        <select name="bookstate" lay-filter="bookstate" id="bookstate">

        </select>
    </div>
</div>
    <%--<div class="layui-form-item">
        <label class="layui-form-label">路径</label>
        <div class="layui-input-inline">
            <input type="text" name="url"   placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>--%>



    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
    </div>
</form>

<!-- 资 源 引 入 -->
<%--<script src="component/layui/layui.js"></script>--%>
<%--<script src="component/pear/pear.js"></script>--%>
<script>
    layui.use(["table","form","jquery"],function (){
        var table=layui.table;
        var form=layui.form;
        var $=layui.jquery;
        //执行一个 table 实例
        table.render({
            elem:'#teaTable',
            url:'/book/selectTeacher',
            toolbar:'#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {field: 'bookid', title: '书籍ID', width:120, sort: true, fixed: 'left' }
                ,{field: 'url', title: '实物图', width:120, sort: true,templet:"#aad"}
                ,{field: 'bookname', title: '书籍名称', width:120}
                ,{field: 'bookauthor', title: '书籍作者', width: 120, sort: true, totalRow: true}
                ,{field: 'bookcount', title: '书籍数量', width:120, sort: true}
                ,{field: 'bookmoney', title: '书籍价格', width:150, sort: true}
                ,{field: 'typeid', title: '书籍类型', width:120, sort: true}
                ,{field: 'bookpublisher', title: '书籍出版社', width:120, sort: true}
                ,{field: 'bookprice', title: '书籍单价', width:120, sort: true}
            // ,{field: 'bookstate', title: '书籍状态', width:120, sort: true}
                ,{field: 'bookstate', title: '书籍状态' ,align: 'center',templet: function (d) {
                        if (d.bookstate == 1){
                            return "<button class='layui-btn layui-btn-xs layui-btn-radius disabled'>已上架</button>";
                        }else {
                            return "<button class='layui-btn layui-btn-xs layui-btn-danger layui-btn-radius disabled'>已下架</button>";
                        }
                    },width: '8%'}
            ,{title: '操作', minWidth: 150, toolbar: '#currentTableBar'}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'line',
            id:"teaTable"
        });
        // 监听搜索操作  全局模糊查询
        form.on('submit(searchBtn)', function (data) {
            //执行搜索重载
            table.reload('teaTable', {
                page: {
                    curr: 1
                }
                , where: {
                    bookname: $("#all").val()
                }
            });
            return false;
        });

        //新增
        form.on('submit(formDemo)', function (obj) {
            console.log(obj)
            var formdata = new FormData($('#addform')[0]);
            //执行搜索重载
            $.ajax({
                url:"/book/addBook",
                data:formdata,
                method:"post",
                dataType:"json",
                contentType:false,
                processData:false,
                success: function (result) {
                    if (result.code === 200) {
                        layer.closeAll();
                        layer.msg(result.msg, {icon: 1});
                        // $('#img')[0].src=result.url
                        table.reload("teaTable"); //跟新表格信息
                    } else {
                        layer.msg(result.msg, {icon: 5});
                    }
                }
            })
            return false;
        });

        //工具栏事件
        table.on('toolbar(teaTable)', function(obj){
            switch(obj.event){
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                    break;
                case 'add':
                    getAllbooktype();
                    getBookStatus();
                    $('#addform')[0].reset(); /*清空表单*/
                    layer.open({
                        content:$('#addform')
                        ,type:1,
                        title:['书籍信息','font-size:25px;'],
                        area:["500px","400px"]
                    });
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(teaTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'delete'){
                layer.confirm('确认删除吗', function(index){
                    $.ajax({
                        url:"/book/deleteTeacher"
                        ,type:"post"
                        ,data:{bookid:data.bookid}
                        ,success:function (a) {
                            if (a.code==1){
                                table.reload("teaTable");
                            }else{
                                layer.msg('失败', {icon: 5});
                            }
                        }
                    })
                    layer.close(index);
                });

            } else if(obj.event === 'edit'){
console.log(data);
var url=data.url;
// var url=new URL(url);
// var url=url.searchParams.get("url");
//                 var file = $("#fileName").get(0).files[0];
//                 console.log(file)
// $("#fileName1").val(url);
                form.val("biaodan", data);
                layer.open({
                    content:$('#addform')
                    ,type:1
                    ,skin: 'layui-layer-molv',
                })
            }
        });




//添加图书类型的下拉菜单
        function getAllbooktype() {
            $.ajax({
                url:"/bookType/findAllbooktype" ,
                dataType:"json",
                data:{},
                type:"get",
                async:false,
                success:function (reData){
                    console.log(reData)
                    for(var i=0;i<reData.data.length;i++){
                        $("#typeid").append("<option value='"+reData.data[i].typeid+"'>"+reData.data[i].booktype+"</option>")
                    }
                    form.render();
                }
            })
        }
        //书籍状态下拉
        function getBookStatus() {
            $("#bookstate").append("<option value='"+1+"'>"+"已上架"+"</option>")
            $("#bookstate").append("<option value='"+2+"'>"+"已下架"+"</option>")
            form.render();
        }
/*

        frontChange:function() {
            var file = $("#fileName").get(0).files[0];
            var r = new FileReader();
            r.readAsDataURL(file);
            $(r).load(function () {
                $('#front').html('');
            })
            if(null != file){
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    vm.frontCardImage = e.target.result;
                }
            }
            //打印看看转后的样子
            console.log(vm.frontCardImage);
        }*/
    });
</script>
</body>
</html>
